<!--fjl 订单详情  2017-12-19-->
<template>
    <section>
        <el-col class="order-blank"></el-col>
        <el-card class="box-card">
            <el-steps :active="this.active" finish-status="success" simple style="margin-top: 20px">
                <el-step title="提交订单" ></el-step>
                <el-step title="支付订单" ></el-step>
                <el-step title="平台发货" ></el-step>
                <el-step title="确认收货" ></el-step>
                <el-step title="完成评价" ></el-step>
            </el-steps>
        </el-card>
        <el-row class="fu-order">
            <el-col :span="12">
                <span style="color: #1d8ce0">当前订单状态：{{orderStatus}}</span>
            </el-col>
            <el-col :span="12" style="float: right">
                <el-button type="danger" v-on:click="" icon="el-icon-delete" place
                           style="float: right; margin-right:10px" v-show="fuDeleteOrder">删除订单
                </el-button>
                <el-button type="primary" v-on:click="handleList()" place style="float: right" v-show="fuShip">发货
                </el-button>
            </el-col>
        </el-row>
        <el-col class="order-blank"></el-col>
        <!--基本信息-->
        <el-card class="box-card information">
            <div slot="header">
                <span>基本信息</span>
            </div>
            <el-form label-width="100px">
                <el-form-item label="订单编号">
                    <el-col :offset="1">
                        {{order.order_no}}
                    </el-col>
                </el-form-item>
                <el-form-item label="下单时间">
                    <el-col :offset="1">
                        {{order.created_at}}
                    </el-col>
                </el-form-item>
                <el-form-item label="用户账号">
                    <el-col :offset="1">
                        <el-button type="text" v-on:click="handleUserView(order)">{{order.user.user_no}}</el-button>
                    </el-col>
                </el-form-item>
                <el-form-item label="订单类型">
                    <el-col :offset="1">
                        <el-col :span="1">
                            <el-col v-if="parseInt(this.order.order_type)=== 1">普通订单</el-col>
                            <el-col v-if="parseInt(this.order.order_type)=== 2">卡券提货订单</el-col>
                        </el-col>
                    </el-col>
                </el-form-item>
                <el-form-item label="支付方式">
                    <el-col :offset="1">
                        {{order.order_pay_method}}
                    </el-col>
                </el-form-item>
                <el-form-item label="订单来源">
                    <el-col :offset="1">
                        <el-col :span="1">
                            <el-col v-if="parseInt(this.order.order_source)=== 1 ">微信</el-col>
                            <el-col v-if="parseInt(this.order.order_source)=== 2">移动端_web</el-col>
                            <el-col v-if="parseInt(this.order.order_source)=== 3">app</el-col>
                            <el-col v-if="parseInt(this.order.order_source)=== 4">pc</el-col>
                        </el-col>
                    </el-col>
                </el-form-item>
                <el-form-item label="活动信息">
                    <el-col :offset="1">
                    </el-col>
                </el-form-item>
                <el-form-item label="获得积分">
                    <el-col :offset="1">
                    </el-col>
                </el-form-item>
                <el-form-item label="支付时间">
                    <el-col :offset="1">
                        {{order.pay_at}}
                    </el-col>
                </el-form-item>
                <el-form-item label="售后">
                    <el-col :offset="1">
                    </el-col>
                </el-form-item>
                <el-form-item label="备注信息">
                    <el-col :offset="1">
                        {{order.comment}}
                    </el-col>
                </el-form-item>
            </el-form>
        </el-card>

        <el-col class="order-blank"></el-col>
        <!--商品信息-->
        <el-card class="box-card">
            <div slot="header">
                <span>商品信息</span>
                <el-button type="primary" v-on:click="handleFreight" style="float: right" place
                           v-show="fuUpdShippingCosts" size="mini">修改运费
                </el-button>
            </div>
            <el-table highlight-current-row @selection-change="" style="width: 100%;" :data="productInfo">
                <el-table-column prop="full_Url" label="商品图片">
                    <template slot-scope="scope">
                        <img :src="scope.row.full_Url" class="main-image"/>

                    </template>
                </el-table-column>
                <el-table-column prop="product_name" label="商品标题"></el-table-column>
                <el-table-column prop="sku" label="sku码"></el-table-column>
                <el-table-column prop="optionsStr" label="规格"></el-table-column>
                <el-table-column prop="orderProduct.real_price" label="价格"></el-table-column>
                <el-table-column prop="preferentialAmount" label="优惠金额"></el-table-column>
                <el-table-column prop="orderProduct.quantity" label="数量"></el-table-column>
                <el-table-column prop="totalAmount" label="小计"></el-table-column>
                <el-table-column label="操作" width="300">
                    <template slot-scope="scope">

                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top:15px;">
                <span style="font-size: 14px;">总计:{{order.order_real_total}} (含运费￥{{order.delivery_fee}})</span>
            </div>
        </el-card>
        <el-col class="order-blank"></el-col>
        <!--收货信息-->
        <el-card class="box-card">
            <div slot="header">
                <span>收货信息</span>
                <el-button type="primary" v-on:click="handleReceiverInfo" style="float: right" place
                           v-show="fuUpdDeliveredInformation" size="mini">修改收货人信息
                </el-button>
            </div>
            <el-table highlight-current-row @selection-change="" style="width: 100%;" :data="deliveredInformation">
                <el-table-column prop="receive_name" label="收货人"></el-table-column>
                <el-table-column prop="receive_phone" label="手机号码"></el-table-column>
                <el-table-column prop="country_id" label="邮政编码"></el-table-column>
                <el-table-column prop="detail_address" label="收货地址"></el-table-column>
                </el-table-column>
            </el-table>
        </el-card>
        <el-col class="order-blank"></el-col>

        <!--收入计算-->
        <el-card class="box-card">
            <div slot="header">
                <span>收入计算</span>
            </div>
            <el-table highlight-current-row @selection-change="" style="width: 100%;">
                <el-table-column prop="" label="商品总价"></el-table-column>
                <el-table-column prop="" label="运费"></el-table-column>
                <el-table-column prop="" label="订单金额"></el-table-column>
                <el-table-column prop="" label="优惠金额"></el-table-column>
                <el-table-column prop="" label="退款金额"></el-table-column>
                <el-table-column prop="" label="消耗积分"></el-table-column>
                <el-table-column prop="" label="应付款金额"></el-table-column>
                <el-table-column prop="" label="分佣金额"></el-table-column>
                <el-table-column prop="" label="平台收入"></el-table-column>
                </el-table-column>
            </el-table>
        </el-card>
        <el-col class="order-blank"></el-col>
        <!--发票信息-->
        <el-card class="box-card">
            <div slot="header">
                <span>发票信息</span>
                <el-button type="primary" v-on:click="handleOrderInvoice(order.orderInvoice)" style="float: right" place
                               v-show="fuUpdOrderInvoice" size="mini">修改发票信息
                </el-button>
            </div>
            <el-table highlight-current-row @selection-change="" style="width: 100%;" :data="invoice">
                <el-table-column prop="invoice_type" label="发票类型"></el-table-column>
                <el-table-column prop="invoice_theme" label="开票主题"></el-table-column>
                <el-table-column prop="invoice_title" label="发票抬头"></el-table-column>
                <el-table-column prop="products_type" label="发票内容"></el-table-column>
                <el-table-column prop="taxpayer_identifier" label="缴纳人识别号"></el-table-column>
                </el-table-column>
            </el-table>
        </el-card>
        <el-col class="order-blank"></el-col>
        <!--操作记录-->
        <el-card class="box-card">
            <div slot="header">
                <span>操作记录</span>
                <el-button type="primary" v-on:click="handleHistory" place style="float: right"
                           v-show="fuCommentOrder" size="mini">备注订单
                </el-button>
            </div>
            <el-table highlight-current-row @selection-change="" style="width: 100%;" :data="histories">
                <el-table-column prop="operatorName" label="处理人"></el-table-column>
                <el-table-column prop="created_at" label="处理时间"></el-table-column>
                <el-table-column prop="operator_desc" label="备注信息"></el-table-column>
                </el-table-column>
            </el-table>
        </el-card>
        <el-col class="order-blank"></el-col>
        <el-button type="primary" v-on:click="handleReturn()" place style="float: right">返回列表</el-button>

        <!--&lt;!&ndash;发票信息修改 start&ndash;&gt;-->
        <el-dialog  :visible.sync="visible.orderInvoice" width="500px">
            <div slot="title" class="dialog-title" >
                修改发票信息
            </div>
            <el-form :model="orderInvoiceForm"  ref="orderInvoiceForm" :rules='orderInvoiceRules' label-width="110px">
                <el-form-item label="订单id" style="display: none" prop="order_id">
                    <el-input  v-model="orderInvoiceForm.order_id"></el-input>
                </el-form-item>
                <el-form-item label="是否开票" prop="is_invoiced">
                    <el-select v-model="orderInvoiceForm.is_invoiced"  placeholder="请选择" @change="invoicedSelect">
                        <el-option
                          v-for="(item,index) in invoiceOptions"
                          :key="index+1"
                          :label="item"
                          :value="index+1">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发票抬头" prop="invoice_title">
                    <el-input  v-model="orderInvoiceForm.invoice_title" :disabled="orderInvoiceForm.is_invoiced === 2"></el-input>
                </el-form-item>
                <el-form-item label="发票内容" prop="products_type">
                    <el-input   v-model="orderInvoiceForm.products_type" :disabled="orderInvoiceForm.is_invoiced === 2"></el-input>
                </el-form-item>
                <el-form-item label="纳锐人识别码" prop="taxpayer_identifier">
                    <el-input   v-model="orderInvoiceForm.taxpayer_identifier" :disabled="orderInvoiceForm.is_invoiced === 2"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                 <el-button @click.native="visible.orderInvoice = false">取消</el-button>
                 <el-button type="primary" @click.native="handleSaveOrderInvoice" >确 定</el-button>

            </span>
        </el-dialog>
        <!--&lt;!&ndash;发票信息修改 end &ndash;&gt;-->

        <!--&lt;!&ndash;增加订单备注 start&ndash;&gt;-->
        <el-dialog  :visible.sync="visible.history" width="500px">
            <div slot="title" class="dialog-title" >
                备注订单
            </div>
            <el-form :model="historyForm"  ref="historyForm" :rules='historyRules' label-width="110px">
                <el-form-item label="订单id" prop="order_id" style="display: none">
                    <el-input  v-model="historyForm.order_id"></el-input>
                </el-form-item>
                <el-form-item label="操作备注" prop="operator_desc">
                    <el-input type="textarea" v-model="historyForm.operator_desc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                 <el-button @click.native="visible.history = false">取消</el-button>
                 <el-button type="primary" @click.native="handleSaveHistory">确 定</el-button>

            </span>
        </el-dialog>
        <!--&lt;!&ndash;增加订单备注 end &ndash;&gt;-->

        <!--&lt;!&ndash;收货人修改 start&ndash;&gt;-->
        <el-dialog  :visible.sync="visible.receiverInfo" width="500px">
            <div slot="title" class="dialog-title" >
                修改收货人信息
            </div>
            <el-form :model="receiverInfoForm"  ref="receiverInfoForm" :rules='receiverInfoRules' label-width="110px">
                <el-form-item label="订单id" prop="order_id" style="display: none">
                    <el-input  v-model="receiverInfoForm.order_id"></el-input>
                </el-form-item>
                <el-form-item label="收件人姓名"  prop="receive_name">
                    <el-input  v-model="receiverInfoForm.receive_name"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="receive_phone">
                    <el-input  v-model="receiverInfoForm.receive_phone"></el-input>
                </el-form-item>
                <el-form-item  label="所在区域" prop="province_id">
                    <el-select v-model="receiverInfoForm.province_id" placeholder="省" @change="getCityList" style="width:114px;">
                        <el-option
                          v-for="item in provinceList"
                          :key="item.area_pid"
                          :label="item.area_name"
                          :value="item.area_id"
                        >
                        </el-option>
                    </el-select>
                    <el-select v-model="receiverInfoForm.city_id" placeholder="市" @change="getCountryList" style="width:114px;">
                        <el-option
                          v-for="item in cityList"
                          :key="item.area_pid"
                          :label="item.area_name"
                          :value="item.area_id">
                        </el-option>
                    </el-select>
                    <el-select v-model="receiverInfoForm.country_id" placeholder="区/县"  style="width:114px;">
                        <el-option
                          v-for="item in countryList"
                          :key="item.area_pid"
                          :label="item.area_name"
                          :value="item.area_id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="详细地址" prop="detail_address">
                    <el-input type="textarea" v-model="receiverInfoForm.detail_address"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                 <el-button @click.native="visible.receiverInfo = false">取消</el-button>
                 <el-button type="primary" @click.native="handleSaveReceiverInfo">确 定</el-button>
            </span>
        </el-dialog>
        <!--&lt;!&ndash;收货人信息修改 end &ndash;&gt;-->

        <!--&lt;!&ndash;运费修改 start&ndash;&gt;-->
        <el-dialog  :visible.sync="visible.freightInfo" width="500px">
            <div slot="title" class="dialog-title" >
                修改运费信息
            </div>
            <el-form :model="freightInfoForm"  ref="freightInfoForm" :rules='freightInfoRules' label-width="110px">
                <el-form-item label="订单id" prop="order_id" style="display: none">
                    <el-input  v-model="freightInfoForm.order_id"></el-input>
                </el-form-item>
                <el-form-item label="订单金额">
                    <span style="color: red; font-size: 14px">￥{{freightInfoForm.order_total}}</span>
                </el-form-item>
                <el-form-item label="运费" prop="delivery_fee">
                    <el-input  v-model="freightInfoForm.delivery_fee" @change="changeDeliveryFee"></el-input>
                </el-form-item>
                <el-form-item label="活动优惠">
                     ￥{{freightInfoForm.preferentialTotal}}
                </el-form-item>
                <el-form-item label="应付款金额" prop="order_real_total">
                    <span style="color: red ;font-size: 14px">￥{{freightInfoForm.order_real_total}}</span>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                 <el-button @click.native="visible.freightInfo = false">取消</el-button>
                 <el-button type="primary" @click.native="handleSaveFreightInfo">确 定</el-button>
            </span>
        </el-dialog>
        <!--&lt;!&ndash;运费信息修改 end &ndash;&gt;-->
    </section>
</template>
<script>
  import { getOrder, editOrderInvoice, addOrderHistory, editDeliveryInfo, getAreas } from '../../api/api'

  export default {
    data () {
      return {
        visible: {
          orderInvoice: false,
          history: false,
          receiverInfo: false,
          freightInfo: false
        },
        freightInfoForm: {
          delivery_fee: '',
          order_real_total: '',
          order_total: '',
          preferentialTotal: ''
        },
        orderInvoiceForm: {
          is_invoiced: '',
          products_type: '',
          invoice_title: '',
          taxpayer_identifier: '',
          order_id: '',
          invoice_id: ''
        },
        historyForm: {
          order_id: '',
          operator_desc: ''
        },
        receiverInfoForm: {
          province_id: '',
          province_name: '',
          country_id: '',
          country_name: '',
          city_id: '',
          city_name: '',
          receive_name: '',
          receive_phone: '',
          detail_address: ''
        },
        freightInfoRules: {
          delivery_fee: [
            {required: true, message: '请输入运费'}
          ]
        },
        receiverInfoRules: {
          province_id: [
            {required: true, message: '请选择省'}
          ],
          city_id: [
            {required: true, message: '请选择市'}
          ],
          country_id: [
            {required: true, message: '请选择城市'}
          ],
          receive_name: [
            {required: true, message: '请输入收件人姓名'}
          ],
          receive_phone: [
            {required: true, message: '请输入手机号码'}
          ],
          detail_address: [
            {required: true, message: '请输入详细地址'}
          ]
        },
        historyRules: {
          operator_desc: [
            {required: true, message: '请输入订单备注'}
          ]
        },
        orderInvoiceRules: {
          is_invoice: [
            {required: true, message: '请选择是否开票'}
          ],
          invoice_title: [
            {required: true, message: '请输入发票抬头'}
          ],
          products_type: [
            {required: true, message: '请输入发票品类'}
          ],
          taxpayer_identifier: [
            {required: true, message: '请输入纳税人识别号'}
          ]
        },
        order: {
          user: {}
        },
        active: 0,
        provinceList: [], // 省
        cityList: [], // 市
        countryList: [], // 区县集合
        deliveredInformation: [],
        invoice: [],
        histories: [],
        productInfo: [],
        fuCancelOrder: false,
        fuCommentOrder: false,
        fuUpdOrderInvoice: false,
        fuUpdDeliveredInformation: false,
        fuDeleteOrder: false,
        fuShip: false,
        fuUpdShippingCosts: false
      }
    },
    methods: {
      invoicedSelect (value) {},
      changeDeliveryFee (value) {
        this.freightInfoForm.order_real_total = parseInt(this.order.order_total) + parseInt(value) - parseInt(this.order.preferentialTotal)
      },
      handleDetails () {
        let id = this.$route.params.id
        getOrder(id).then(res => {
          this.order = res.data
          this.deliveredInformation.push(this.order)
          this.invoice.push(this.order.invoice)
          this.histories = this.order.histories
          this.productInfo = this.order.products
        })
      },
      // 显示运费信息
      handleFreight () {
        this.visible.freightInfo = true
        this.freightInfoForm = {
          delivery_fee: this.order.delivery_fee,
          order_real_total: this.order.order_real_total,
          order_total: this.order.order_total,
          preferentialTotal: this.order.preferentialTotal,
          order_id: this.order.order_id
        }
      },

      // 显示查看发票界面
      handleOrderInvoice (row) {
        this.visible.orderInvoice = true
        this.orderInvoiceForm = {
          is_invoiced: parseInt(this.order.is_invoiced),
          order_id: this.order.invoice.order_id,
          invoice_title: this.order.invoice.invoice_title,
          products_type: this.order.invoice.products_type,
          taxpayer_identifier: this.order.invoice.taxpayer_identifier,
          order_invoice_id: this.order.invoice.order_invoice_id
        }
      },
      //  显示收件人信息
      handleReceiverInfo () {
        this.visible.receiverInfo = true
        this.receiverInfoForm = {};
        this.receiverInfoForm.order_id = this.order.order_id
        this.receiverInfoForm.receive_name = this.order.receive_name
        this.receiverInfoForm.receive_phone = this.order.receive_phone
        this.receiverInfoForm.detail_address = this.order.detail_address
        this.receiverInfoForm.province_id = parseInt(this.order.province_id)
        this.receiverInfoForm.city_id = parseInt(this.order.city_id)
        this.receiverInfoForm.country_id = parseInt(this.order.country_id)
        this.handleProvince()
        this.getCityList(parseInt(this.order.province_id))
        this.getCountryList(this.order.city_id)
      },
      // 显示备注信息
      handleHistory () {
        this.visible.history = true
        this.historyForm = {};
        this.historyForm.order_id = this.order.invoice.order_id
      },

      // 增加备注信息
      handleSaveHistory () {
        this.$refs.historyForm.validate(valid => {
          if (valid) {
            addOrderHistory(this.historyForm).then(res => {
              if (parseInt(res.status) === 1) {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.handleDetails()
                this.visible.history = false
              }
            })
          }
        })
      },
      // 修改运费信息
      handleSaveFreightInfo () {
        this.$refs.freightInfoForm.validate(valid => {
          if (valid) {
            console.log(this.freightInfoForm);
            editDeliveryInfo(this.freightInfoForm).then((res) => {
              if (parseInt(res.status) === 1) {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
//                this.handleDetails()
                this.visible.freightInfo = false
              }
            })
          }
        })
      },
      // 修改收货人信息
      handleSaveReceiverInfo () {
        this.provinceList.map((item) => {
          if (item.area_id === this.receiverInfoForm.province_id) {
            this.receiverInfoForm.province_name = item.area_name
          }
        })
        this.cityList.map((item) => {
          if (item.area_id === this.receiverInfoForm.city_id) {
            this.receiverInfoForm.city_name = item.area_name
          }
        })
        this.countryList.map((item) => {
          if (item.area_id === this.receiverInfoForm.country_id) {
            this.receiverInfoForm.country_name = item.area_name
          }
        })
        this.$refs.receiverInfoForm.validate(valid => {
          if (valid) {
            editDeliveryInfo(this.receiverInfoForm).then((res) => {
              if (parseInt(res.status) === 1) {
                this.visible.receiverInfo = false
//                this.handleDetails()
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
              }
            })
          }
        })
      },
      // 修改发票信息
      handleSaveOrderInvoice () {
        this.$refs.orderInvoiceForm.validate(valid => {
          if (valid) {
            editOrderInvoice(this.orderInvoiceForm).then((res) => {
              if (parseInt(res.status) === 1) {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.visible.OrderInvoice = false
              }
            })
          }
        })
      },
      //   查看用户详情
      handleUserView (row) {
        let id = row.user_id
        this.$router.push({path: `/users/${id}`})
      },
      handleReturn () {
        this.$router.push({path: `/order/list`})
      },
      // 获取省
      handleProvince () {
        getAreas({area_pid: ''}).then(res => {
          if (res.status === 1) {
            this.provinceList = res.data
          }
        })
      },
      getCityList (value) {
        let para = {}
        para.area_pid = value
        this.cityList = []
        getAreas(para).then(res => {
          this.cityList = res.data
        })
      },
      getCountryList (value) {
        let para = {}
        para.area_pid = value
        this.countryList = []
        getAreas(para).then(res => {
          this.countryList = res.data
        })
      }
    },
    computed: {
      invoiceOptions () {
        return this.$store.getters.isInvoice
      },
      orderStatus () {
        if (parseInt(this.order.order_status) === 1) {
          this.fuCancelOrder = true
          this.fuUpdShippingCosts = true
          this.fuUpdOrderInvoice = true
          this.fuUpdDeliveredInformation = true
          this.fuCommentOrder = true
          this.active = 1
          return '待付款'
        }
        if (parseInt(this.order.order_status) === 2) {
          this.fuUpdDeliveredInformation = true
          this.fuUpdOrderInvoice = true
          this.fuShip = false
          this.fuCancelOrder = true
          this.active = 2
          return '待发货'
        }
        if (parseInt(this.order.order_status) === 3) {
          this.fuUpdDeliveredInformation = true
          this.fuUpdOrderInvoice = true
          this.fuCancelOrder = true
          this.fuCommentOrder = true
          this.active = 3
          return '已发货'
        }
        if (parseInt(this.order.order_status) === 4) {
          this.fuUpdOrderInvoice = true
          this.fuCommentOrder = true
          this.active = 4
          return '已完成'
        }
        if (parseInt(this.order.order_status) === 5) {
          this.fuCommentOrder = true
          return '退货中'
        }
        if (parseInt(this.order.order_status) === 0) {
          this.fuCommentOrder = true
          this.fuDeleteOrder = true
          return '已取消'
        }
        return ''
      }
    },
    mounted () {
      this.handleDetails();
    }
  }
</script>
<style rel="stylesheet/sass" lang="sass" scoped>
    .order-blank
      height: 20px
      background-color: #f6fafd
    .fu-order
      padding-top: 25px
      background-color: #f6fafd
    span
      font-size: 18px
    .image-list
      img
        left: 0
        width: 100px
        height: 100px
        background-color: #fbfdff
        border-radius: 6px
        margin-left: 5px
        float: left
        margin-top: 5px
    .information
        .el-form-item
          margin-bottom: 0px;

    .el-table thead tr
       background-color: #e5f0fb!important

    .main-image
        width: 50px
        height: 50px

</style>
<style type="text/css">
    .el-table thead tr{
        background-color: #f3f8fd!important;
    }
</style>
